<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import type { Component } from 'vue';
import { getPaletteColorByNumber, mixColor } from '@sa/color';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { loginModuleRecord } from '@/constants/app';
import { localStg } from '@/utils/storage';
import PwdLogin from './modules/pwd-login.vue';
import CodeLogin from './modules/code-login.vue';
import Register from './modules/register.vue';
import ResetPwd from './modules/reset-pwd.vue';
import BindWechat from './modules/bind-wechat.vue';

// const modules = ['sampling', 'dimo', 'tacha', 'platform'];

const titles: Record<'sampling' | 'dimo' | 'tacha' | 'platform', string> = {
  sampling: '农产品土壤采样系统',
  dimo: '农膜监测调查系统',
  tacha: '外来入侵病虫害调查系统',
  platform: '多租户后台管理系统'
};

// 计算属性：获取当前 subSystem（即 URL 中的 s 参数）
const subSystem = ref<string>('');

const title = ref<string>('');

function setSubSystem(sys: string) {
  subSystem.value = sys;
}

watch(
  () => subSystem.value,
  () => {
    if (subSystem.value) {
      if (subSystem.value === 'sampling') {
        localStg.set('sysTitle', titles.sampling);
        localStg.set('currModule', 'SAMPLING');
        title.value = titles.sampling;
      } else if (subSystem.value === 'dimo') {
        localStg.set('sysTitle', titles.dimo);
        localStg.set('currModule', 'DIMO');
        title.value = titles.dimo;
      } else if (subSystem.value === 'tacha') {
        localStg.set('sysTitle', titles.tacha);
        localStg.set('currModule', 'TACHA');
        title.value = titles.tacha;
      } else if (subSystem.value === 'platform') {
        localStg.set('sysTitle', titles.platform);
        localStg.set('currModule', 'PLATFORM');
        title.value = titles.platform;
      } else {
        subSystem.value = '';
      }
    } else {
      subSystem.value = '';
    }
  }
);

interface Props {
  /** The login module */
  module?: UnionKey.LoginModule;
}

const props = defineProps<Props>();

const appStore = useAppStore();
const themeStore = useThemeStore();

interface LoginModule {
  label: string;
  component: Component;
}

const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
  'pwd-login': { label: loginModuleRecord['pwd-login'], component: PwdLogin },
  'code-login': { label: loginModuleRecord['code-login'], component: CodeLogin },
  register: { label: loginModuleRecord.register, component: Register },
  'reset-pwd': { label: loginModuleRecord['reset-pwd'], component: ResetPwd },
  'bind-wechat': { label: loginModuleRecord['bind-wechat'], component: BindWechat }
};

const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);

const bgThemeColor = computed(() => (themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor));

const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff';

  const ratio = themeStore.darkMode ? 0.5 : 0.2;

  return mixColor(COLOR_WHITE, themeStore.themeColor, ratio);
});
</script>

<template>
  <div class="relative size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
    <WaveBg :theme-color="bgThemeColor" />
    <div v-if="!subSystem" class="navi-sys h-full">
      <!-- 背景装饰元素 -->
      <div class="background-deco deco-1"></div>
      <div class="background-deco deco-2"></div>

      <!-- 主标题 -->
      <h1 class="main-title">
        业务系统导航
        <div class="title-bar"></div>
      </h1>

      <div class="card-container">
        <div class="system-card" @click="setSubSystem('sampling')">
          <div class="system-name">
            <span class="icon">🌱</span>
            {{ titles.sampling }}
          </div>
          <div class="hover-effect"></div>
        </div>
        <div class="system-card" @click="setSubSystem('dimo')">
          <div class="system-name">
            <span class="icon">🌱</span>
            {{ titles.dimo }}
          </div>
          <div class="hover-effect"></div>
        </div>
        <div class="system-card" @click="setSubSystem('tacha')">
          <div class="system-name">
            <span class="icon">🌱</span>
            {{ titles.tacha }}
          </div>
          <div class="hover-effect"></div>
        </div>
        <div class="system-card" @click="setSubSystem('platform')">
          <div class="system-name">
            <span class="icon">🌱</span>
            {{ titles.platform }}
          </div>
          <div class="hover-effect"></div>
        </div>
      </div>

      <!-- 技术支持信息 -->
      <div class="corporate-footer">
        <div class="copyright-info">
          <span class="copyright-text">© 2025-2027 河南鹤壁嘉多卫农农林科技 版权所有</span>
          <a href="http://beian.miit.gov.cn" class="icp-record">沪ICP备2023000000号-1</a>
        </div>
        <div class="tech-support">技术支持 by 河南鹤壁嘉多卫农农林科技 技术部</div>
      </div>
    </div>
    <NCard v-else :bordered="false" class="relative z-4 mb-12vh w-auto rd-12px p-15px">
      <div class="w-450px">
        <header class="flex-y-center justify-between">
          <SystemLogo class="text-64px text-primary lt-sm:text-48px" />
          <h3 class="text-28px text-primary font-500 lt-sm:text-22px">
            {{ title }}
          </h3>
          <div class="flex flex-col items-center">
            <ThemeSchemaSwitch
              :theme-schema="themeStore.themeScheme"
              :show-tooltip="false"
              class="text-20px lt-sm:text-18px"
              @switch="themeStore.toggleThemeScheme"
            />
            <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" :show-tooltip="false" @change-lang="appStore.changeLocale" />
          </div>
        </header>
        <main class="pt-24px">
          <h3 class="text-18px text-primary font-medium">{{ $t(activeModule.label) }}</h3>
          <div class="pt-24px">
            <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
              <component :is="activeModule.component" />
            </Transition>
          </div>
        </main>
        <div class="mb-3 mt-6 text-center text-gray-600 underline">
          <span class="cursor-pointer text-xs transition-colors hover:text-gray-800" @click="setSubSystem('')">返回导航页</span>
        </div>
      </div>
    </NCard>
  </div>
</template>

<style scoped>
.navi-sys {
  /* 主背景渐变 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  padding-top: 15vh;
}

/* 动态背景装饰 */
.navi-sys::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(199, 228, 255, 0.3) 0%, transparent 30%),
    radial-gradient(circle at 15% 85%, rgba(199, 228, 255, 0.2) 0%, transparent 35%);
  animation: subtleFlow 25s linear infinite;
}

@keyframes subtleFlow {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.05) rotate(1deg);
  }
}

/* 模糊装饰元素 */
.background-deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.1;
  mix-blend-mode: multiply;
}

.deco-1 {
  width: 50vmax;
  height: 50vmax;
  background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 100%);
  top: -10vmax;
  right: -15vmax;
}

.deco-2 {
  width: 40vmax;
  height: 40vmax;
  background: linear-gradient(45deg, #dbeafe 0%, #eff6ff 100%);
  bottom: -12vmax;
  left: -10vmax;
}

/* 主标题增强样式 */
.main-title {
  @apply text-4xl font-medium mb-12;
  color: rgba(30, 58, 138, 0.9);
  position: relative;
  padding-bottom: 28px;
  text-shadow: 0 2px 4px rgba(30, 58, 138, 0.08);
  letter-spacing: 0.05em;
  z-index: 1;
}

/* 增强色条样式 */
.title-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 6px; /* 增加高度 */
  background: linear-gradient(90deg, rgba(30, 58, 138, 0) 0%, rgba(30, 58, 138, 0.9) 50%, rgba(30, 58, 138, 0) 100%);
  border-radius: 4px;
  box-shadow:
    0 4px 12px rgba(30, 58, 138, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

/* 悬浮交互效果 */
.main-title:hover .title-bar {
  width: 210px;
  background: linear-gradient(90deg, rgba(30, 58, 138, 0) 0%, rgba(30, 58, 138, 1) 50%, rgba(30, 58, 138, 0) 100%);
}

/* 动态光效 */
.title-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: lightFlow 3s ease-in-out infinite;
  transform: skewX(-20deg);
}

@keyframes lightFlow {
  0% {
    left: -20%;
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 80%;
    opacity: 0.4;
  }
}

/* 卡片容器布局 */
.card-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr)); /* 扩展为4列并设置最小宽度 */
  gap: 24px; /* 微调间距 */
  width: 1300px;
  margin: 4rem auto 0;
  padding: 0;
  z-index: 1;
}

/* 系统卡片样式 */
.system-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 8px rgba(30, 58, 138, 0.05),
    0 1px 2px rgba(30, 58, 138, 0.1);
  border: 1px solid rgba(224, 242, 254, 0.6);
  backdrop-filter: blur(4px);
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.system-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 16px rgba(30, 58, 138, 0.1),
    0 2px 4px rgba(30, 58, 138, 0.06);
}

/* 文字样式 */
.main-title {
  @apply text-3xl font-medium mb-8;
  color: rgba(30, 58, 138, 0.9);
  letter-spacing: 0.05em;
  z-index: 1;
}

.system-name {
  @apply text-xl font-semibold;
  color: rgba(30, 58, 138, 0.9);
  text-align: center;
}

.icon {
  @apply block text-4xl mb-4;
}

/* 企业信息容器 */
.corporate-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-family: 'Helvetica Neue', system-ui;
}

/* 版权信息样式 */
.copyright {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-size: 0.875rem;
  color: rgba(30, 58, 138, 0.68);
}

.icp {
  color: rgba(30, 58, 138, 0.6);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.icp:hover {
  color: rgba(30, 58, 138, 0.9);
}

/* 底部企业信息容器 */
.corporate-footer {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Helvetica Neue', system-ui;
  line-height: 1.3;
}

/* 版权信息行 */
.copyright-info {
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  color: rgba(30, 58, 138, 0.68);
}

/* ICP备案号 */
.icp-record {
  color: rgba(30, 58, 138, 0.6);
  margin-left: 0.8rem;
  text-decoration: none;
}

/* 技术支持行 */
.tech-support {
  font-size: 0.84rem;
  color: rgba(30, 58, 138, 0.75);
}
</style>
